<template>
  <div class="searchPage">
    <div class="query">
      <div class="cancel" @click="cancel">取消</div>
      <div class="input">
        <input v-model="query" @keyup.13="search" type="text" placeholder="输入电影名称"/>
      </div>
    </div>
    <div class="hot">
      <h3>热门电影</h3>
      <button v-for="item in hotMovies" @click="hotSearch(item.id)">{{item.name}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      query: '',
      hotMovies: [
        {name: '金刚狼3', id: '25765735'},
        {name: '一条狗的使命', id: '6873143'},
        {name: '生化危机:终章', id: '20471852'},
        {name: '乐高蝙蝠侠', id: '26145033'},
        {name: '爱乐之城', id: '25934014'},
        {name: '欢乐好声音', id: '26354572'}
      ]
    }
  },
  methods: {
    search () {
      var param = {path: '/searchResult', query: this.query}
      this.$router.push(param)

      console.log('search: ' + JSON.stringify(param))
    },
    hotSearch (movieID) {
      var url = '/movie/' + movieID
      this.$router.push(url)

      console.log('hotSearch: ' + url)
    },
    cancel () {
      window.history.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .searchPage
  {
    margin: 5px;
    line-height: 24px;

    .query
    {
      .cancel {
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        font-size: 16px;
        width: 60px;
        float: right;
        text-align: center;

        border-radius: 12px;
        border: solid 1px #aaa;

        cursor: pointer;
      }

      .input
      {
        margin-right: 70px;

        input {
          -moz-box-sizing: border-box;
          box-sizing: border-box;

          width: 100%;
          font-size: 12px;
          line-height: 24px;
          border-radius: 12px;
          padding: 0 12px;
          border: solid 1px #aaa;
        }
      }
    }

    .hot
    {
      h3{
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 10px;
      }

      button{
        font-size: 12px;
        line-height: 24px;
        color: red;

        border-radius: 12px;
        border: solid 1px #aaa;

        padding: 0 12px;

        cursor: pointer;
      }

      button{
        margin: 5px 10px 5px 0;
      }
    }
  }




</style>
